<template>
  <div class="g-home-wrap">
    <section class="form-box">
      <p class="g-border" >
        <span>机构码</span>
        <input type="text" v-model="obj.orgCode">
      </p>
      <p class="g-border">
        <span>订单流水号</span>
        <input type="text" v-model="obj.orderNo">
      </p>
      <p class="g-border">
        <span>截止时间</span>
        <input type="text" placeholder="yyyy-MM-dd HH:mm:ss" v-model="obj.deadLine">
      </p>
      <p class="g-border">
        <span>金额（单位：分）</span>
        <input type="text"  placeholder="单位：分" v-model="obj.loanMoney"/>
      </p>
      <p class="g-border">
        <span>课程名称</span>
        <input type="text" placeholder="不超过50个字符" v-model="obj.courseName"/> 
      </p>
      <p class="g-border">
        <span>回调地址</span>
        <input type="text" placeholder="http、https" v-model="obj.notifyUrl"/> 
      </p>
      <p class="btn-box">
        <button class="button" :class="{'on':btnText=='txuedai'}" @click="btnFn('txuedai')">测试环境</button>
        <button class="button" :class="{'on':btnText=='xuedai'}"  @click="btnFn('xuedai')">生产环境</button>
      </p>
    </section>
    <section class="g-btn-box">
      <button @click="payOrder">跳转链接，到订单页</button>
    </section>
  </div>
</template>
<script>
import api from '$api';
import {getFormateDate} from '$Gfn';
export default {
  name: '',
  data() {
    return {
      async : false,
      obj : {
        orgCode :'shhdjy001svujqz',
        orderNo :'100000000000001',
        deadLine :getFormateDate('1',1),
        loanMoney :'400000',
        courseName :"上天透透风",
        notifyUrl:'http://pay.sanhao.com/labi.php'
      },
      btnText:'txuedai'
    }
  },
  methods: {
    //获取订单详情
    payOrder () {
      let obj = {
        orgCode   : this.obj.orgCode,
        orderNo   : this.obj.orderNo,
        deadLine  : this.obj.deadLine,
        loanMoney : this.obj.loanMoney,
        courseName :this.obj.courseName,
        notifyUrl  :this.obj.notifyUrl
      }
      api.payOrder(obj,this.btnText).then((res)=>{
        if(res.result == '200'){
          let url = JSON.parse(res.data).jumpUrl
          location.href = url;
        } else {
          alert(res.respMesg)
        }
      })
    },
    btnFn (name) {
      this.btnText =name;
    }
  }
}
</script>
<style lang="scss" scoped>
.g-home-wrap {
  padding:0 15px 100px;
  max-width: 500px;
  margin:60px auto 0;
  background: #fff;
  section{
    padding-top: 20px;
  }
  .img-box{
    img{
      display: block;
      margin:0 auto;
      width: 80%;
    }
  }
  
  .form-box{
    p{
      height: 50px;
      display: flex;
      align-items: center;
      span{
        width: 120px;
      }
      input{
        height: 100%;
        flex:1;
        border:0;
        text-align: right;
      }
      .button{
        background: #f0f0f0;
        display: block;
        flex:1;
        border:none;
        margin:0 10px;
        height: 100%;
        border-radius: 4px;
        &.on{
          background: $col-blue;
          color:#fff;
        }
      }
    }
    .btn-box{
      padding-top:20px;
      height: 70px;
    }
  }
}


  
</style>
